<template>
  <el-dialog
    v-model="dialogVisibleBill"
    title="流水明细 "
    width="650px"
    :before-close="handleClose"
    class="dialog-bill-box"
  >
    <el-form :inline="true" :model="formInlineBill" class="bill-form-box">
      <el-form-item label="选择日期">
        <el-date-picker
          class="store-el-input-box"
          v-model="formInlineBill.value2"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
        />
      </el-form-item>
    </el-form>
    <div class="bill-type-box flex ac jb">
      <span class="bill-type-box-items">我的收益：10元</span>
      <span class="bill-type-box-items">我的收益：10元</span>
      <span class="bill-type-box-items">我的收益：10元</span>
    </div>
    <div class="bill-table-box">
      <el-table
        :data="tableData"
        height="450px"
        stripe
        :header-cell-style="{
          color: '#828A9D',
          textAlign: 'center',
          height: '60px',
        }"
        :cell-style="{ textAlign: 'center', color: '#1B2431' }"
      >
        <el-table-column fixed prop="date" label="日期" />
        <el-table-column prop="date" label="收益" />
      </el-table>
    </div>
  </el-dialog>
</template>
<script setup>
import {
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  ref,
  defineEmits,
  nextTick,
} from 'vue'
const { proxy: that } = getCurrentInstance()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    },
  },
  tableData: {
    type: Array,
    default: () => {
      return []
    },
  },
})
// 流水明细
let dialogVisibleBill = ref(false)
let formInlineBill = ref({})
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
watch(
  () => props.show,
  (newValue, oldValue) => {
    dialogVisibleBill.value = props.show
  }
)
const emit = defineEmits(['onClose'])
const handleClose = () => {
  emit('onClose', false)
}
</script>
<style lang="scss">
@import './store_dislog.scss';
</style>